<template>
  <div class="bbs-homepage">
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="userinfo">
            <el-avatar
              class="avatar"
              shape="square"
              :size="100"
              fit="cover"
              :src="headImg(userInfo)"
            ></el-avatar>
            <div class="userinfo-wrap">
              <h2>{{ userInfo.userName }}</h2>
              <p>
                <span>粉丝：{{ fansCount }}</span>
                <span>关注：{{ followCount }}</span>
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="btns">
          <el-button
            type="primary"
            size="mini"
            v-if="id != userId"
            @click="handleFans()"
          >
            {{ followRelation == 0 ? '关注' : '取消关注' }}
          </el-button>
          <el-button
            type="primary"
            size="mini"
            v-if="id != userId"
            @click="handleMessage()"
            >发私信</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <TopicList />
    <SendMessage />
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
import userInfo from '@/mixins/userInfo'
import Bus from '@/utils/bus.js'
export default {
  mixins: [setInfo, userInfo],
  components: {
    SendMessage: () => import('@/components/sendMessage'),
    TopicList: () => import('./TopicList.vue'),
  },
  data() {
    return {
      id: '',
      fansCount: '',
      followCount: '',
      followRelation: '',
      userInfo: {},
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      let res = await this.$store.dispatch('myInfoBbsFans', this.id)
      this.fansCount = res.data[0].fansCount || 0
      this.followCount = res.data[0].followCount || 0
      this.followRelation = res.data[0].followRelation || 0
      this.userInfo = res.data[0].userInfo
    },
    async handleFans() {
      let obj = { userId: this.id, fansId: this.userId, relation: 1 }
      this.followRelation == 0
        ? await this.$store.dispatch('addBbsFans', obj)
        : await this.$store.dispatch('cancelBbsFans', obj.userId)
      this.getUserInfo()
      this.successMsg('操作成功')
    },
    // 发送私信
    handleMessage() {
      Bus.$emit('sendMessage', [this.id])
    },
  },
}
</script>
<style scoped lang="scss">
.bbs-homepage {
  padding-top: 10px;
  .userinfo {
    .avatar {
      height: 100px;
      float: left;
      margin-right: 10px;
    }
    .userinfo-wrap {
      display: inline-block;
      h2 {
        font-size: 24px;
        font-weight: 400;
        color: #272e3b;
        display: inline-block;
        margin-top: 15px;
      }
      p {
        margin-top: 10px;
        color: #999;
        span {
          margin-right: 20px;
        }
      }
    }
  }
  .btns {
    text-align: right;
  }
}
</style>